<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
	  th:with="title='个人中心',active='userinfo'"
	  xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<!-- head 头部-->
<head th:replace="web/common/fragment::head(${title},null,'')"></head>
<body>

<div th:replace="web/layout/header::header(${active})"></div>
<!--	main	-->
<div class="fly-main" th:if="${session.sessionUser!=null}"  th:with="loginUser=${session.sessionUser}">
	<div class="layui-row clear layui-col-space15">
		<!--	left begin	-->
		<div class="layui-col-sm12 layui-col-md3">
			<div class="layui-card">
				<div class="layui-card-body" style="padding: 25px;">
					<div class="text-center layui-text">
						<div class="user-info-head" id="imgHead">
							<span th:if="${loginUser.userGrade==1}" class="vip-icon"></span>
							<img th:src="${thUtil.formatUserImage(loginUser.userImg)}"/>
						</div>
						<h2 style="padding-top: 20px;" th:class="${loginUser.userGrade==1?'color-vip':''}" th:text="${loginUser.nickName}">Serati Ma</h2>
						<p style="padding-top: 8px;">海纳百川，有容乃大</p>
					</div>
					<div class="layui-text" style="padding-top: 30px;">
						<div class="info-list-item">
							<i class="layui-icon layui-icon-username"></i>
							<p th:text="${loginUser.userName}">unknow</p>
						</div>
						<div class="info-list-item">
							<i class="layui-icon layui-icon-release"></i>
							<p th:text="${loginUser.userGrade==1?'超级VIP':loginUser.userGrade==2?'至尊VIP':'普通用户'}">论坛版主</p>
						</div>
						<div class="info-list-item">
							<i class="layui-icon layui-icon-location"></i>
							<p th:text="${loginUser.userAddress}">湖北省武汉市</p>
						</div>
					</div>
					<div class="dash"></div>
					<h3>标签</h3>
					<div class="layui-badge-list" style="padding-top: 6px;">
						<span class="layui-badge layui-bg-gray">SpringBoot</span>
						<span class="layui-badge layui-bg-gray">SpringCloud</span>
						<span class="layui-badge layui-bg-gray">系统设计</span>
						<span class="layui-badge layui-bg-gray">大帅比</span>
						<span class="layui-badge layui-bg-gray">Java</span>
						<span class="layui-badge layui-bg-gray">海纳百川</span>
					</div>
				</div>
			</div>
		</div>
		<!--	 left end		-->
		<!--		right begin			-->
		<div class="layui-col-sm12 layui-col-md9">
			<div class="layui-card">
				<div class="layui-card-body" style="min-height: 600px;box-sizing: border-box;padding-top: 5px;">

					<div class="layui-tab layui-tab-brief user-tab">
						<ul class="layui-tab-title">
							<li ><a href="/user/config">基本信息</a></li>
							<li><a href="/user/oauth">账号绑定</a></li>
							<li><a href="/user/oauth">浏览记录</a></li>
							<li class="layui-this"><a href="/user/post">发帖记录</a></li>
							<li><a href="/user/comment">评论记录</a></li>
							<li><a href="/user/loginLog">登陆日志</a></li>
						</ul>
					</div>
					<div class="user-info-content">
						<table class="layui-table" id="post-table" lay-filter="post-table"></table>
					</div>
				</div>
			</div>
		</div>
		<!--	right end		-->
	</div>


</div>
<!--	main end	-->
<!--	底部版权		-->
<div th:replace="web/layout/footer::footer"></div>
<!--	搜索		-->
<div th:replace="web/layout/common::pop-search"></div>
<!--	右边工具栏	-->
<div th:replace="web/layout/common::right-bar"></div>
<!--	引入JS	-->
<div th:replace="web/common/fragment::js"></div>
<!-- 表格操作列 -->
<script type="text/html" id="post-table-bar">
	<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>修改</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" ajax-event="del" ajax-url="/admin/post/" value="{{d.postId}}">
		<i class="layui-icon layui-icon-delete"></i>删除</a>
</script>
<!--类型-->
<script type="text/html" id="data-table-type">
	{{#  if(d.postType == 0){ }}
	<span class="layui-badge layui-bg-gray">普通文章</span>
	{{#  } else if(d.postType == 1){ }}
	<span class="layui-badge">付费文章</span>
	{{#  } else if(d.postType == 2){ }}
	<span class="layui-badge layui-bg-blue">登陆可见</span>
	{{#  } else if(d.postType == 3){ }}
	<span class="layui-badge layui-bg-green">回复可见</span>
	{{#  } else{ }}
	unkown
	{{#  }}}
</script>
<script type="text/html" id="data-table-target">
	{{#  if(d.target == "_self"){ }}
	当前窗口打开
	{{#  } else if(d.target == "_blank"){ }}
	新窗口打开
	{{#  } else{ }}
	unkown
	{{#  }}}
</script>
<script type="text/javascript" >
	layui.use(['layer', 'form', 'element', 'upload','table','util'], function () {
		var $ = layui.jquery;
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var upload = layui.upload;
		var table = layui.table;
		var util = layui.util;

		upload.render({
			elem: '#imgHead',
			url: '', // 上传接口
			done: function (res) {
				// 上传完毕回调
			},
			error: function () {
				// 请求异常回调
			}
		});
		$('#qqBind').click(function () {
			layer.open({
				type: 2,
				title: 'QQ 登陆',
				offset: '80px',
				area: ['800px', '500px'],
				content: '/oauth/render/qq'
			});
		})


		//渲染表格
		var tableIns = table.render({
			elem: '#post-table',
			url: '/user/posts?userId='+loginUserId,
			page : true,
			loading : true,
			limit : 10,
			limits : [ 10, 20, 50, 100 ],
			response:{
				countName: 'total'
			},
			cols: [
				[
					{type: 'numbers'},
					{field: 'postTitle',width:360, title: '文章名',templet: function (d) {
							return '['+d.catalog.catalogName+']<a href="/post/'+ d.postId +'" target="_blank" style="text-decoration: underline">'+d.postTitle+'</a>';
						}},
					/*{field: 'catalogName',width:140, sort: true, title: '文章板块',templet: function (d) {
							return d.catalog.catalogName;
						}},*/
					/*{field: 'postType',width:100,title: '文章类型',templet:'#data-table-type'},*/
					{field: 'commentCount',width:60,sort:true, title: '回复'},
					{
						field: 'createTime',width:160, sort: true, templet: function (d) {
							return util.toDateString(d.createTime);
						}, title: '创建时间'
					},
					{align: 'center', width:180,toolbar: '#post-table-bar', title: '编辑'}
				]
			]
		});
		//渲染表格
		var tableInsComment = table.render({
			elem: '#comment-table',
			url: '/user/comments?userId='+loginUserId,
			page : true,
			loading : true,
			limit : 10,
			limits : [ 10, 20, 50, 100 ],
			response:{
				countName: 'total'
			},
			cols: [
				[
					{type: 'numbers'},
					/*{field: 'postType',width:100,title: '文章类型',templet:'#data-table-type'},*/
					{field: 'commentContent',title: '评论内容'},
					{field: 'postTitle',title: '文章',templet: function (d) {
							return '<a href="/post/'+ d.postId +'" target="_blank" style="text-decoration: underline">'+d.postTitle+'</a>';
						}},
					{
						field: 'createTime',  templet: function (d) {
							return util.toDateString(d.createTime);
						}, title: '创建时间'
					},
					{align: 'center', toolbar: '#post-table-bar', title: '编辑'}
				]
			]
		});

	});
</script>
<div th:replace="web/common/fragment::post"></div>

</body>
</html>
